<template>
	<view class="contentasd">
		<view class="bgColor">
		</view>
		<view class="bottomF">
		</view>
		<view class="headerBox">
			<!-- <button class="bun" @click="sqtc"> -->
			<button class="bun" open-type="getPhoneNumber" @getphonenumber="phoneLogin">
				<!-- <image src="/static/wx.png" mode="" style="width: 53rpx;height: 43rpx;margin-right: 20rpx;"></image> -->
				手机号快捷登录
			</button>
			<button class="bun buns" @click="back()">暂不登录</button>
		</view>
		<view class="bottomBox">
			<view class="bottomName" @click="agree=!agree">
				<image src="/static/dui.png" mode="" v-if="agree"></image>
				<image src="/static/budui.png" mode="" v-if="!agree"></image>
				<view style="flex: 1;">
					请阅读并同意 <text @click.stop="toUrl('服务')">《服务协议》</text>和<text @click.stop="toUrl('隐私')">《隐私协议》</text>
				</view>
			</view>
		</view>
		<view style="height: 240rpx;">
		</view>
	</view>
</template>

<script>
	import config from '@/config.js'
	export default {
		data() {
			return {
				agree: false,
				avater: "",
				inputName: "",
				code: ""
			}
		},
		onLoad() {
			this.getLoginCode()
		},
		methods: {
			onInputName(e) {
				console.log(e)
				this.inputName = e.detail.value;
			},
			onNicknameBlur(e) {
				console.log(e)
				this.inputName = e.detail.value;
			},
			// // 上传图片
			onChooseAvatar(e) {
				console.log(e, '图片')
				let that = this
				uni.uploadFile({
					url: config.base_url + 'api/upload',
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						'type': '1'
					},
					success: (uploadFileRes) => {
						uni.hideLoading();
						var json = JSON.parse(uploadFileRes.data)
						that.avater = json.url

					}
				});

			},
			getLoginCode() {
				let that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider)
						uni.login({
							provider: res.provider[0],
							success: async loginRes => {
								console.log("🚀 ~ file: index.vue:171 ~ getLoginCode ~ loginRes:",
									loginRes)
								that.code = loginRes.code
							}
						})
					}
				});
				// getProvider()
				//   .then(provider => {
				// uni登录

				// })
			},
			phoneLogin(e) {
				if (!this.agree) {
					uni.showToast({
						title: '请阅读并同意用户隐私协议',
						icon: 'none',
						duration: 2000
					})
					return
				}

				let that = this
				// if (!this.avater) {
				// 	uni.showToast({
				// 		title: '请上传头像',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				// if (!this.inputName) {
				// 	uni.showToast({
				// 		title: '请输入昵称',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				console.log('用户微信手机号登录')
				console.log(e.mp.detail)
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					console.log('wxLoginCode', e)
					// cookie.set('wxLoginCode', this.code)
					that.$ajax.post({
						url: 'app/phoneWxLogin',
						data: {
							encryptedData: e.mp.detail.encryptedData,
							iv: e.mp.detail.iv,
							code: that.code,
							head: that.avater,
							nickName: that.inputName,
						},
					}).then((res) => {
						if (res.code == 0) {
							that.loginNoYes = true
							that.userInfo = res.userInfo
							uni.setStorageSync('token', res.token)
							uni.setStorageSync('userInfo', res.userInfo)
							uni.showToast({
								title: "登录成功",
								icon: "none",
								duration: 2000
							})
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/index/index"
								});
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					});
					//  wxappAuth({
					//    encryptedData: e.mp.detail.encryptedData,
					//    iv: e.mp.detail.iv,
					//    code: this.code,
					// head:this.avater,
					// nickName:this.inputName,
					//    spread: cookie.get('spread'),
					//  })
					//    .then(res => {
					//      console.log('登录成功,开始处理登录信息保存，并获取用户详情')
					//      uni.hideLoading()
					//      store.commit('login', res.data.token, dayjs(res.data.expires_time))
					//      store.dispatch('userInfo', true)
					//      getUserInfo()
					//        .then(user => {
					//          console.log('获取用户信息成功')
					//          uni.setStorageSync('uid', user.data.uid)
					//          store.dispatch('setUserInfo', user.data)
					// if(cookie.get('redirect').replace(/\ /g, '')){
					// 	this.$yrouter.reLaunch({
					// 	  path: cookie.get('redirect').replace(/\ /g, ''),
					// 	})
					// }else{
					// 	uni.navigateBack()
					// }

					//        })
					//        .catch(error => {
					//          console.log('获取用户信息失败')
					//          this.getLoginCode()
					//        })
					//    })
					//    .catch(error => {
					//      console.log(error)
					//      console.log('登录接口调用失败')
					//      this.getLoginCode()
					//    })
				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			quxiao() {
				this.$refs.popup.close()
			},
			sqtc() {
				if (!this.agree) {
					uni.showToast({
						title: '请阅读并同意用户隐私协议',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.$refs.popup.open()
			},
			toUrl(name) {
				if (name == '服务') {
					uni.navigateTo({
						url: '/pages/mine/webview?url=https://cxadmin.zjcsdn.online/AR7汽车服务用户服务使用协议.html' // 替换为实际的doc文件URL
					});
				} else {
					uni.navigateTo({
						url: '/pages/mine/webview?url=https://cxadmin.zjcsdn.online/AR7验车 隐私协议.html' // 替换为实际的doc文件URL
					});
				}


			},
			back() {
				uni.reLaunch({
					url: "/pages/index/index"
				});
			},
			// sqtc() {
			// 	if (!this.agree) {
			// 		uni.showToast({
			// 			title: '请阅读并同意用户隐私协议',
			// 			icon: 'none',
			// 			duration: 2000
			// 		})
			// 		return
			// 	}
			// 	let that = this
			// 	uni.getUserProfile({
			// 		desc: '登录后可同步数据',
			// 		success: (userRes) => {
			// 			uni.showLoading({
			// 				title: '登录中...'
			// 			})
			// 			uni.login({
			// 				provider: 'weixin',
			// 				success: (res) => {
			// 					uni.hideLoading()
			// 					this.code = res.code;
			// 					if (res.errMsg == 'login:ok') {
			// 						that.$ajax.get({
			// 							url: 'app/wxLogin',
			// 							data: {
			// 								code: this.code,
			// 								encryptedData: userRes.encryptedData,
			// 								iv: userRes.iv,
			// 								nickName: userRes.userInfo.nickName,
			// 								avatarUrl: userRes.userInfo.avatarUrl,
			// 							},
			// 						}).then((res) => {
			// 							if (res.code == 0) {
			// 								that.loginNoYes = true
			// 								that.userInfo = res.userInfo
			// 								uni.setStorageSync('token', res.token)
			// 								uni.setStorageSync('userInfo', res.userInfo)
			// 								uni.showToast({
			// 									title: "登录成功",
			// 									icon: "none",
			// 									duration: 2000
			// 								})
			// 								setTimeout(() => {
			// 									uni.reLaunch({
			// 										url: "/pages/my/my"
			// 									});
			// 								}, 2000)
			// 							} else {
			// 								uni.showToast({
			// 									title: res.msg,
			// 									icon: 'none',
			// 									duration: 2000
			// 								})
			// 							}
			// 						});
			// 					}
			// 				},
			// 			});
			// 		},
			// 		fail: () => {
			// 			uni.hideLoading()
			// 			uni.showToast({
			// 				title: '授权已取消',
			// 				icon: 'error',
			// 				mask: true,
			// 			});
			// 		}
			// 	})
			// },
		}
	}
</script>

<style lang="less">
	.contentasd {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		// background: #FBE3E3;
		padding-top: 146rpx;
	}

	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background: #FBE3E3;
		z-index: -1;
	}

	.headerBox {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		// padding: 100rpx 0;
		// box-sizing: border-box;
		// padding-top: 150rpx;
		padding-bottom: 150rpx;

		.headerTou {
			width: 180rpx;
			height: 180rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 50%;
			}
		}

		.headerTou>button {
			width: 180rpx;
			height: 180rpx;
			padding: 0;
			border: none;
			background: none;
		}

		.headerTou>button::after {

			border: none;

		}

		.headerName {


			width: 500rpx;
			height: 80rpx;
			background: #ffffff;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			margin: 50rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
			box-sizing: border-box;

			input {
				font-size: 30rpx;
				text-align: center;
				font-weight: bold;
				flex: 1;
			}
		}

		.bun {
			width: 620rpx;
			height: 91rpx;
			background: #AED4FF;
			border-radius: 50rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			margin-top: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.buns {
			margin-top: 43rpx;
		}
	}

	.bottomBox {
		display: flex;
		width: 100%;
		padding: 0 66rpx;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;

		.bottomName {
			font-size: 26rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #A7A7A7;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			// .bottomCheck{
			// 	width: 30rpx;
			// 	height: 30rpx;
			// 	border-radius: 50%;
			// 	border: 2rpx solid #1698FD;
			// 	margin-right: 30rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	.bottomCheckDIna{
			// 		width: 15rpx;
			// 		height: 15rpx;
			// 		border-radius: 50%;
			// 		background: #1698FD;
			// 	}
			// }
			text {
				// text-decoration: underline;
				color: #474747;
			}
		}
	}

	.bottomF {
		width: 100%;
		height: 514rpx;

		// position: fixed;
		// bottom: 0;
		// left: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.message {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999999;
	}

	.messageBox {
		background: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx 30rpx 50rpx;
		box-sizing: border-box;
	}

	.messageTop {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #000;
	}

	.messageTop>image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.messageTitle {
		margin-top: 30rpx;
		font-size: 35rpx;
		font-weight: bold;
		color: #000;
	}

	.Tip {
		counter-reset: 30rpx;
		margin-top: 15rpx;
		color: #A2A0A3;
	}

	.arrow {

		width: 10px;

		height: 10px;

		border-top: 2px solid #999;

		border-right: 2px solid #999;

		position: absolute;

		right: 20rpx;

		transform: rotate(45deg);

		margin-top: 10rpx;

	}

	.msgLi {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		border-bottom: 1rpx solid #A2A0A3;
		padding: 15rpx 0;
		box-sizing: border-box;
	}

	.msgLeft {
		font-size: 35rpx;
		font-weight: bold;
		color: #000;
	}

	.msgRight {
		display: flex;
		align-items: center;
	}

	.msgRight>button {
		width: 70rpx;
		height: 70rpx;
		padding: 0;
		margin-right: 30rpx;
		border: none;
		background: none;
	}

	.msgRight>button::after {

		border: none;

	}

	.msgRight>button image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.msgRight>input {
		// background: #EEECEF;
		background: #E24A3F;
		color: #ffffff;
		margin-right: 30rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		text-align: center;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10rpx;
	}

	.msgName {
		font-size: 26rpx;
		color: #A2A0A3;
		margin-top: 15rpx;
	}

	.footerBtn {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 50rpx;
		padding: 0 30rpx;
	}

	.footerBtns {
		width: 200rpx;
		height: 80rpx;
		/* background: #6DBFA1; */
		background: #E24A3F;

		text-align: center;
		line-height: 80rpx;
		color: #ffffff;
		// font-weight: bold;
		border-radius: 10rpx;
		font-size: 35rpx;
	}

	.force-login-wrap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 11111;
		top: 0;

		.logo-bg {
			width: 640rpx;
			height: 300rpx;
		}

		.force-login__content {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.user-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 40rpx;
			}

			.user-name {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000;
				margin-bottom: 30rpx;
			}

			.login-notice {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000;
				line-height: 44rpx;
				width: 500rpx;
				text-align: center;
				margin-bottom: 80rpx;
			}

			.author-btn {
				width: 630rpx;
				height: 80rpx;
				background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
				background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
				// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}

			.close-btn {
				width: 630rpx;
				height: 80rpx;
				margin-top: 30rpx;
				border-radius: 40rpx;
				border: 2rpx solid #eb3729;
				background: none;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #eb3729;
			}
		}
	}

	/deep/.uni-popup__wrapper-box {
		background: #ffffff !important;
		border-radius: 20rpx 20rpx 0 0;
	}

	/deep/.vue-ref {
		padding-bottom: 0 !important;
	}

	.popupBox {
		padding: 40rpx 30rpx 70rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 20rpx;

		.popupTitle {
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 13rpx;
			}

			font-size: 33rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: bold;
			color: #232323;

		}

		.popupFu {
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: normal;
			color: #898989;
			margin: 25rpx 0;
		}

		.inpt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f2f2f2;

			.inptLeft {
				font-size: 33rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: normal;
				color: #232323;
			}

			.inptRight {
				display: flex;
				align-items: center;

				.headerTou {
					width: 81rpx;
					height: 81rpx;

					image {
						width: 100%;
						height: 100%;
						display: block;
						border-radius: 50%;
					}
				}

				.headerTou>button {
					width: 81rpx;
					height: 81rpx;
					padding: 0;
					border: none;
					background: none;
				}

				.headerTou>button::after {

					border: none;

				}

				input {
					text-align: right;
					flex: 1;
					font-size: 33rpx;
				}
			}
		}

		.bbnn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 45rpx 85rpx 0;
			box-sizing: border-box;

			.bbnnS {
				width: 201rpx;
				height: 81rpx;
				border-radius: 15rpx;
				background: #E2E2E2;
				font-size: 33rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: normal;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.popupBox {
		padding: 40rpx 30rpx 70rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 20rpx;

		.popupTitle {
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 13rpx;
			}

			font-size: 33rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: bold;
			color: #232323;

		}

		.popupFu {
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: normal;
			color: #898989;
			margin: 25rpx 0;
		}

		.inpt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f2f2f2;

			.inptLeft {
				font-size: 33rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: normal;
				color: #232323;
			}

			.inptRight {
				display: flex;
				align-items: center;

				.headerTou {
					width: 81rpx;
					height: 81rpx;

					image {
						width: 100%;
						height: 100%;
						display: block;
						border-radius: 50%;
					}
				}

				.headerTou>button {
					width: 81rpx;
					height: 81rpx;
					padding: 0;
					border: none;
					background: none;
				}

				.headerTou>button::after {

					border: none;

				}

				input {
					text-align: right;
					flex: 1;
					font-size: 33rpx;
				}
			}
		}

		.small {
			font-size: 26rpx;
			color: #898989;
			margin: 20rpx 0 0rpx 2rpx;
		}

		.bbnn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 45rpx 85rpx 0;
			box-sizing: border-box;

			.bbnnS {
				width: 201rpx;
				height: 81rpx;
				border-radius: 15rpx;
				background: #E2E2E2;
				font-size: 33rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: normal;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>